<template>
    <customNavigationBar title="订单管理" />

    <view class="orderTypeBar">
        <view class="type" :class="index == activeOrderType && 'active'" v-for="(item, index) in orderTypes" :key="item" @click="changeOrderType(index)">
            {{ item }}
        </view>

        <view class="filterBox" @click="filterPopShow()">
            <image src="/static/common/icon_filter.png"></image>
            <view>筛选</view>
        </view>
    </view>

    <view class="orders">
        <swiper class="swiper" :current="swiperSelectedType" @change="swiperChange">
            <swiper-item v-for="(item, index) in orderTypes" :key="item">
                <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="scrolltolower(index)">
                    <div style="margin-bottom: 24rpx" v-for="item in orderList.records" :key="item.id">
                        <orderItem :order="item" />
                    </div>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>

    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" :is-mask-click="false">
        <view class="popupContent">
            <view class="popupTop">
                <view class="title">时间范围</view>
                <uni-datetime-picker v-model="TimeRange" type="daterange" return-type="string" @change="dateChange" />
            </view>

            <view class="buttons">
                <view @click="resetFilterParams">重置</view>
                <view class="confirm" @click="resetFilterConfirm">确定</view>
            </view>
        </view>
    </uni-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import orderItem from './orderItem.vue';
import { homeApis } from '@/utils/apis';

const activeOrderType = ref(0);
const swiperSelectedType = ref(0);
const orderTypes = ref(['帮手订单']);
// 页数
const pageParamsList = ref([
    {
        current: 1,
        size: 10
    }
]);

const filterParams = ref({
    startDate: '',
    endDate: ''
});
const TimeRange = ref([]);
const dateChange = (e) => {
    TimeRange.value = e;
};
const swiperChange = (e) => {
    typeBarChange(e.detail.current);
};

const typeBarChange = (index) => {
    swiperSelectedType.value = index;
    TimeRange.value = [];
    filterParams.value = {
        startDate: '',
        endDate: ''
    };
};
const popup = ref();
const filterPopShow = () => {
    popup.value.open();
};
const closePopup = () => {
    popup.value.close();
};
const resetFilterParams = () => {
    filterParams.value = {
        startDate: '',
        endDate: ''
    };
    TimeRange.value = [];
};
const resetFilterConfirm = () => {
    if (TimeRange.value.length === 0) {
        filterParams.value.startDate = '';
        filterParams.value.endDate = '';
    } else {
        filterParams.value.startDate = TimeRange.value[0];
        filterParams.value.endDate = TimeRange.value[1];
    }
    getOrderList();
    closePopup();
};

onLoad(() => {
    getOrderList();
});
const orderList = ref({});
const getOrderList = async () => {
    let res = await homeApis.getRiderOrderList({ ...filterParams.value, ...pageParamsList.value[swiperSelectedType.value] });

    if (res.data.current == 1) {
        orderList.value = res.data;
    } else {
        if (orderList.value.current != res.data.current) {
            let records = [...orderList.value.records, ...res.data.records];
            orderList.value = { ...res.data, records };
        }
    }
};
const changeOrderType = (index) => {
    activeOrderType.value = index;
};

const scrolltolower = async (index) => {
    switch (index) {
        case 0:
            if (pageParamsList.value[0].current < orderList.value.pages) {
                pageParamsList.value[0].current++;
            }
            break;
        default:
            break;
    }
};
</script>

<style>
page {
    background: #f2f3f5;
}
</style>

<style lang="scss" scoped>
.orderTypeBar {
    height: 92rpx;
    width: 100%;
    padding: 0 32rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 40rpx;

    position: sticky;
    top: calc(var(--status-bar-height) + 88rpx);
    z-index: 99;

    .type {
        font-size: 28rpx;
        line-height: 28rpx;

        color: #999999;
        position: relative;

        &.active::after {
            content: '';
            position: absolute;
            bottom: -18rpx;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 4rpx;
            background: #2c72ff;
            width: 48rpx;
            height: 8rpx;
        }

        &.active {
            font-size: 28rpx;
            line-height: 28rpx;
            color: #333333;
        }
    }

    .filterBox {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 18rpx;
        image {
            width: 24rpx;
            height: 24rpx;
        }
        view {
            font-size: 24rpx;
            color: #333333;
            line-height: 34rpx;
        }
    }
}

.orders {
    width: 100%;
    padding: 20rpx 24rpx 40rpx;
    gap: 24rpx;
    height: calc(100vh - var(--status-bar-height) - 88rpx - 92rpx);

    .swiper {
        height: 100%;

        swiper-item {
            height: 100%;
            .scroll-view {
                height: 100%;
            }
        }
    }
}
.popupContent {
    width: 100%;
    padding: 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    background: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .close {
        margin-left: auto;
        width: 36rpx;
        height: 36rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        image {
            width: 26rpx;
            height: 26rpx;
        }
    }

    .popupTop {
        width: 100%;
        margin-bottom: 30rpx;
        .title {
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 18rpx;
        }
        input {
            width: 100%;
            box-sizing: border-box;
            height: 68rpx;
            background: #f2f3f5;
            border-radius: 8rpx;
            padding: 0 24rpx;
            font-size: 28rpx;
            color: #333333;
            line-height: 68rpx;

            &::placeholder {
                color: #e4e4e6;
            }
        }
    }

    .buttons {
        margin-top: 48rpx;
        display: flex;
        align-items: center;
        gap: 46rpx;
        view {
            flex: 1;
            height: 64rpx;
            background: #e4e4e6;
            border-radius: 44rpx;
            font-size: 28rpx;
            color: #000000;
            color: #000000;
            line-height: 64rpx;
            text-align: center;
        }
        .confirm {
            color: #fff;
            background: #2c72ff;
        }
    }
}
</style>
